<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { initWS } from '/src/utils/initWS.js'
import { dataPro_errorinfo } from '../js/dataPro_perception.js'
import { faultDescriptions, alertLevels } from '../js/code-match.js'

const ip = `ws://${window.location.host}/ws/`

const config = {
  path: `${ip}monitor/alarm-info`,
  // path: 'ws://localhost:8080',
  name: '告警信息',
}

let data = ref(null)
const handleWsData = (e) => {
  data.value = dataPro_errorinfo(JSON.parse(e.data)['mec-alarm-info'])
}
const ws = initWS(config, handleWsData)

// 卸载
onBeforeUnmount(() => {
  if (ws) ws.close()
})

const formatTimestamp = (row) => {
  const date = new Date(row['alarm-raised-time'])
  return date.toISOString().replace('T', ' ').split('.')[0] // 格式: YYYY-MM-DD HH:mm:ss
}

const formatTimestamp2 = (row) => {
  const date = new Date(row['alarm-changed-time'])
  return date.toISOString().replace('T', ' ').split('.')[0] // 格式: YYYY-MM-DD HH:mm:ss
}

const nameL = (row) => {
  return alertLevels[row['alarm-level']]
}

const nameT = (row) => {
  return faultDescriptions[row['alarm-type']]
}

const nameS = (row) => {
  return row['alarm-status'] == 0 ? '告警消失' : '告警产生'
}
</script>
<template>
  <div class="equipment-container" v-if="data">
    <div class="top">
      <p>告警信息</p>
    </div>

    <div class="showTableEle2" v-for="(item, key) in data">
      <el-table :data="item" border style="width: 100%" show-overflow-tooltip>
        <el-table-column prop="name" label="模块" width="180" />
        <el-table-column prop="alarm-raised-time" :formatter="formatTimestamp" label="告警产生时间" />
        <el-table-column prop="alarm-changed-time" :formatter="formatTimestamp2" label="告警变化时间" />
        <el-table-column prop="alarm-level" :formatter="nameL" label="告警级别" />
        <el-table-column prop="alarm-status" :formatter="nameS" label="告警状态" />
        <el-table-column prop="alarm-type" :formatter="nameT" label="告警类型" />
        <el-table-column prop="addition" label="告警补充信息" />
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.equipment-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.showTableEle2 {
  margin-bottom: 20px;
  > p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}
::v-deep .el-table .cell {
  padding: 4px 10px;
}
.top {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
</style>
